<template>
    <div class="recruit-info-modal-page">
       <!-- <div class="modal-mask publish-job-win-mask"  @click="handleClose">

        </div> -->
        <div class="recruit-info">
             <a class="close-modal"  @click="handleClose"></a>
            <div class="left">
                <div class="big-tit">
                    <span class="pos">{{data.title}}</span>
                    <span class="sarlary">{{data.salary}}</span>
                </div>
                <div class="other-basic">
                    <span>{{data.province}} ｜ {{data.city}}</span>
                    <span>{{data.jobNature}}</span>
                    <span>{{data.createTime}}</span>
                </div>
                <div class="con-items">
                    <div class="con-item">
                        <div class="title">职位描述</div>
                        <div class="content" v-html="data.jobDescription">
                        </div>
                    </div>
                    <div class="con-item">
                        <div class="title">职位要求</div>
                        <div class="content"  v-html="data.skillDescription">
                        </div>
                    </div>
                </div>
                <div class="ly-con-tit">
                    <div>请发送简历至：<a :href="'mailto:'+data.companyEmail">{{data.companyEmail}}</a></div>
                    <div>邮件标题格式为：应聘 + 职位名称 + 来源GAMEUI</div>
                </div>
            </div>
            <div class="right">
                <a class="company-img-box" target="_blank" :href="'/user/'+data.member.id">
                    <img loading="lazy" v-aimgd="{avatar:data.member.avatar,id:data.member.id,w:130,name:data.member.userName}">
                </a>
                <a class="cpy-name" target="_blank" :href="'/user/'+data.member.id">{{data.member.userName}}</a>
                <div class="basic-1">
                    <div>行业：{{data.jobType}}</div>
                    <div>官网：<a :href="data.companyUrl" target="_blank">{{data.companyUrl?data.companyUrl:'--'}}</a></div>
                </div>
                <div class="other-pos-list">
                    <div class="title">
                        其他职位
                    </div>
                    <a class="other-pos-item" v-for="(item,idx) in otherList" :key="idx">
                        <div class="pos-name">{{item.title}}</div>
                        <div class="addr">{{item.province}}｜{{item.city}}｜{{item.jobNature}}</div>
                    </a>
                    <!-- <a class="other-pos-item">
                        <div class="pos-name">游戏特效设计师</div>
                        <div class="addr">北京市｜朝阳区｜全职</div>
                    </a>
                    <a class="other-pos-item">
                        <div class="pos-name">游戏特效设计师</div>
                        <div class="addr">北京市｜朝阳区｜全职</div>
                    </a> -->
                </div>
                <div class="other-btns">
                    <a class="other-pos-btn" @click="showAll">全部职位</a>
                    <a class="private-to" @click="handlePrivateTo" v-if="!isMySelf">私信</a>
                </div>
            </div>
        </div>
        <a-modal v-model="visible" destroyOnClose :zIndex="10001" centered :footer="null" :closable="false" width="860px">
            <Notice ref="refNotice" @close="visible = false" :privatemember="privatemember" />
        </a-modal>
    </div>
</template>

<script>
import Notice from '@/components/Notice'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
export default {
    data(){
        return {
            isMySelf:true,
            privatemember:{},
            visible:false,
            otherList:[]
        }
    },
    props:['data'],
    components:{Notice},
    methods:{
        handlePrivateTo() {
            this.privatemember = this.data.member;
            this.visible = true;
        },
        showAll(){
            this.$emit('showmeall',this.data.companyName);
        },
        onImgError(e){
            e.target.src=require('../assets/pro/default_uimg.svg');
        },
        get_avatar_url(member={id:'', avatar:''}, n=1, w=30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member={id:'', avatar:''}, w=30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        handleClose(){
            this.$emit('close')
        }
    },
    destroyed(){
        document.body.style.overflow='inherit'
    },
    async mounted(){
        this.isMySelf=this.data.member.id==localStorage.getItem('userId');
        document.body.style.overflow='hidden'
        let res=await api.jobList({pageNum:1,paegSize:5,companyName:this.data.companyName});
        this.otherList=res.data;
    }
}
</script>

<style scoped lang="less">
.recruit-info-modal-page{
    .recruit-info{
        // width:1195px;
        // position: fixed;
        // top:15%;
        // left:calc((100% - 1195px) / 2);
        background:#23232A;
        border-radius:30px;
        padding:55px 86px;
        padding-right:61px;
        // z-index:112;
        display: flex;
        align-items: flex-start;
        position: relative;

        .close-modal{
            width:20px;
            height:20px;
            background:url('../assets/pro/close_modal_page.svg') no-repeat;
            background-size:cover;
            position: absolute;
            top:35px;
            z-index:102;
            right:36px;
            transition:.1s all linear;
            &:hover{
                opacity:.8;
                transform: rotate(90deg);
            }
        }
        .left{
            border-right:1px solid #323232;
            // padding-right:377px;
            width:100%;
            .big-tit{
                font-weight:500;
                .pos{
                    font-size:33px;
                    color:#fff;
                }
                .sarlary{
                    font-size:22px;
                    color:#11CCB1;
                    margin-left:28px;
                }
            }
            .other-basic{
                color:#969696;
                font-size:14px;
                margin-top:15px;
                span{
                    margin-right:30px;
                }
            }
            .con-items{
                margin-top:80px;
                max-height:450px;
                overflow-y:auto;
                // padding-right:200px;
                padding-right:20px;
                margin-bottom:50px;
                
                /*滚动条整体部分,必须要设置*/
                &::-webkit-scrollbar{
                    width: 4px;
                    height: 8px;
                    background-color: transparent;
                }
                /*滚动条的轨道*/
                &::-webkit-scrollbar-track{
                    background-color: transparent;
                }
                /*滚动条的滑块按钮*/
                &::-webkit-scrollbar-thumb{
                    border-radius: 3px;
                    background-color: #626262;
                }
                /*滚动条的上下两端的按钮*/
                &::-webkit-scrollbar-button{
                    height: 0;
                }
                
                /* 两个滚动条的交汇处 */
                &::-webkit-scrollbar-corner{
                    background-color: transparent;
                }
                .con-item{
                    margin-bottom:80px;
                    .title{
                        font-size:16px;
                        font-weight:500;
                        color:#fff;
                    }
                    .content{
                        font-size:14px;
                        margin-top:20px;
                        line-height:28px;
                        ::v-deep *{
                            color:#fff !important;
                            background:#23232A !important;
                        }
                    }
                }
            }
            .ly-con-tit{
                font-size:14px;
                line-height:28px;
                color:#fff;
                a{
                    color:#11CCB1;
                }
            }
        }
        .right{
            padding-left:48px;
            text-align: center;
            max-width:368px;
            min-width:368px;
            .company-img-box{
                width:130px;height:130px;
                border-radius:130px;
                overflow: hidden;
                background:#161616;
                display:block;
                margin:0 auto;
                img{
                    width:100%;
                    height:100%;
                    object-fit: cover;
                }
            }
            .cpy-name{
                font-size:18px;
                font-weight:500;
                display:block;
                margin:0 auto;
                margin-top:30px;
                color:#fff;
                margin-bottom:40px;
                transition:.1s all linear;
                &:hover{
                    text-decoration: underline;
                    color:#11CCB1;
                }
            }
            .basic-1{
                font-size:14px;
                color:#969696;
                font-weight:500;
                border-bottom:1px solid #323232;
                padding-bottom:30px;
                line-height:28px;
                a{
                    color:#fff;
                    display: inline-block;
                }
                >div{
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                }
            }
            .other-pos-list{
                margin-top:29px;
                text-align: left;
                color:#fff;
                
                .title{
                    font-size:14px;
                    font-weight:500;
                    margin-bottom:30px;
                }
                .other-pos-item{
                    border-bottom:1px solid #323232;
                    display: inline-block;
                    width:100%;
                    padding-bottom:20px;
                    margin-bottom:19px;
                    .pos-name{
                        font-size:14px;
                        font-weight:500;
                    }
                    .addr{
                        margin-top:11px;
                        color:#969696;
                    }
                }
            }
            .other-btns{
                display: flex;
                align-items: center;
                grid-gap:20px;
                .other-pos-btn{
                    line-height:51px;
                    border-radius:8px;
                    text-align: center;
                    // width:259px;
                    text-align: center;
                    background:#34343C;
                    display: block;
                    font-size:16px;
                    font-weight:500;
                    user-select: none;
                    color:#fff;
                    width:70%;
                    transition:.1s all linear;
                    &:hover{
                        opacity:.8;
                    }
                }
                .private-to{
                    color: #fff;
                    background: #11CCB1;
                    line-height: 51px;
                    height:51px;
                    width:30%;
                    text-align: center;
                    font-size: 14px;
                    border-radius: 8px;
                    transition:background .2s ease;
                    &:hover{
                        background:#0fab94;
                    }
                }
            }
        }
    }
}


































































</style>